<template>
  <div>
    <el-dialog :visible="show" :title="returnTitle" width="1000px" @close="show = false">
      <el-form :model="taskForm" label-width="120px" size="mini">
        <h3>任务</h3>
        <el-form-item label="所属订单">
          <el-input v-model.number="taskForm.usTask.orderId" clearable></el-input>
        </el-form-item>
        <el-form-item label="任务状态">
          <el-select v-model="taskForm.usTask.status" clearable>
            <el-option :value="1" label="待接收"></el-option>
            <el-option :value="2" label="进行中"></el-option>
            <el-option :value="3" label="已完成"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设计师ID">
          <el-input v-model.number="taskForm.usTask.designerId" clearable></el-input>
        </el-form-item>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <h3>任务需求</h3>
          <el-button v-if="returnTitle !== '查看任务'" type="primary" size="small" icon="el-icon-plus" @click="handleAddTaskRequire">新增需求</el-button>
        </div>
        <template v-for="(task, t_index) in taskForm.requires">
          <div :key="t_index" style="margin-bottom: 10px">
            <el-form-item>
              <el-row :gutter="20" type="flex" justify="end">
                <el-col :span="1.5">
                  <el-button type="primary" @click="handleSub(t_index)">
                    <i class="el-icon-remove-outline"></i>
                  </el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="服装分类">
              <el-select v-model="task.gender" placeholder="请选择" clearable>
                <el-option :value="0" label="女装"></el-option>
                <el-option :value="1" label="男装"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="服装类型">
              <el-select v-model="task.types" placeholder="请选择" clearable>
                <el-option v-for="(item, index) in typesOptions" :key="index" :value="item.value" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="最小限制年龄">
              <el-input v-model.number="task.minAge" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="最大限制年龄">
              <el-input v-model.number="task.maxAge" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="功能性描述">
              <el-input v-model="task.functionality" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="风格">
              <el-input v-model="task.style" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="面料">
              <el-input v-model="task.material" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="成本">
              <el-input v-model="task.cost" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="设计师等级">
              <el-input v-model.number="task.level" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="具体需求">
              <el-input v-model="task.require" placeholder="请输入" clearable></el-input>
            </el-form-item>
          </div>
        </template>
      </el-form>
      <div v-if="returnTitle !== '查看任务'" slot="footer">
        <el-button type="primary" @click="handleConfirm">确定</el-button>
        <el-button @click="show = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addTask, updateTask} from "@/api/consultant/task";

const requiresData = {
  minAge: "",
  maxAge: "",
  gender: "",
  types: "",
  functionality: "",
  style: "",
  material: "",
  cost: "",
  level: "",
  require: ""
}
export default {
  name: "taskDialog",
  props: {
    taskData: {
      type: [String, Object],
      default: ""
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      typesOptions: [
        { value: 0, name: "内衬" },
        { value: 1, name: "上衣" },
        { value: 2, name: "外套" },
        { value: 3, name: "裤装" },
        { value: 4, name: "裙装" },
        { value: 5, name: "套装" },
      ],
      taskForm: {
        usTask: {
          orderId: "",
          status: "",
          designerId: ""
        },
        requires: []
      }
    }
  },
  computed: {
    returnTitle() {
      if (this.taskData && this.isEdit) {
        return "修改任务";
      }
      if (this.taskData && !this.isEdit) {
        return "查看任务"
      }
      if (!this.taskData) {
        return "新增任务"
      }
    }
  },
  methods: {
    open() {
      this.taskForm = this.$options.data().taskForm;
      if (this.taskData) {
        this.taskForm = JSON.parse(JSON.stringify(this.taskData));
      } else {
        this.taskForm.requires.push(JSON.parse(JSON.stringify(requiresData)));
      }
      this.show = true;
    },
    // 新增需求
    handleAddTaskRequire() {
      this.taskForm.requires.push(JSON.parse(JSON.stringify(requiresData)));
    },
    // 删除需求
    handleSub(index) {
      this.taskForm.requires.splice(index, 1)
    },
    // 确定添加
    handleConfirm() {
      if (this.isEdit) {
        updateTask(this.taskForm).then(() => {
          this.$message.success("修改成功");
          this.show = false;
          this.$emit("getList")
        })
      } else {
        addTask(this.taskForm).then(res => {
          this.$message.success("添加成功");
          this.show = false;
          this.$emit("getList")
        })
      }
    }
  }
}
</script>

<style scoped>

</style>